<!DOCTYPE html>
<html>
  <head>
    <title>Transparency perf test</title>
    <script src="lib/benchmark.js"></script>
    <script src="lib/weld.js"></script>
    <script src="lib/handlebars-1.0.0.beta.6.js"></script>
    <script src="lib/jquery-1.7.1.min.js"></script>
    <script src="lib/coffee-script.js"></script>
    <script src="../dist/transparency.js"></script>
  </head>
  <body>
    <div>
      <pre id="result"></pre>
    </div>

    <h4>Transparency</h4>
    <div id="transparency">
      <h1 class='header'></h1>
      <h2 class='header2'></h2>
      <h3 class='header3'></h3>
      <h4 class='header4'></h4>
      <h5 class='header5'></h5>
      <h6 class='header6'></h6>
      <ul class='list'>
        <li class='item'></li>
      </ul>
    </div>

    <h4>Handlebars</h4>
    <div id="handlebars">
    </div>

<script type="text/coffeescript">

sharedVariables =
  header: "Header",
  header2: "Header2",
  header3: "Header3",
  header4: "Header4",
  header5: "Header5",
  header6: "Header6",
  list: ['10000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']

results              = $("#result")
transparencyTemplate = $("#transparency")[0]
handlebarsOutput     = $("#handlebars")[0]
handlebarsTemplate   = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{this}}</li>{{/list}}</ul></div>")

new Benchmark.Suite()
  .add("transparency", ->
    Transparency.render transparencyTemplate, sharedVariables, list: item: text: -> @value)

  .add("handlebars", ->
    handlebarsOutput.innerHTML = handlebarsTemplate sharedVariables)

  .on("cycle", (event, bench) ->
    $("#result").append String(bench) + '\n')

  .on("complete", ->
    $("#result").append "Fastest is " + @filter("fastest").pluck("name"))

  .run true
</script>
  </body>
</html>
